<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar & Events - Modern Bootstrap Admin</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Interactive calendar with event management and scheduling">
    <meta name="keywords" content="bootstrap, admin, dashboard, calendar, events, scheduling">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg">
    <link rel="icon" type="image/png" href="/assets/icons/favicon.png">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json">
    
    <!-- Preload critical fonts -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"></head>

<body data-page="calendar" class="calendar-page">
    <!-- Admin App Container -->
    <div class="admin-app">
        <div class="admin-wrapper" id="admin-wrapper">
            
            <!-- Header -->
            <header class="admin-header">
                <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                    <div class="container-fluid">
                        <!-- Logo/Brand -->
                        <a class="navbar-brand d-flex align-items-center" href="./index.html">
                            <img src="/assets/images/logo.svg" alt="Logo" height="32" class="d-inline-block align-text-top me-2">
                            <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
                        </a>

                        <!-- Search Bar with Alpine.js -->
                        <div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
                            <div class="position-relative">
                                <input type="search" 
                                       class="form-control" 
                                       placeholder="Search... (Ctrl+K)"
                                       x-model="query"
                                       @input="search()"
                                       data-search-input
                                       aria-label="Search">
                                <i class="bi bi-search position-absolute top-50 end-0 translate-middle-y me-3"></i>
                                
                                <!-- Search Results Dropdown -->
                                <div x-show="results.length > 0" 
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="opacity-0 scale-95"
                                     x-transition:enter-end="opacity-100 scale-100"
                                     class="position-absolute top-100 start-0 w-100 bg-white border rounded-2 shadow-lg mt-1 z-3">
                                    <template x-for="result in results" :key="result.title">
                                        <a :href="result.url" class="d-block px-3 py-2 text-decoration-none text-dark border-bottom">
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-file-text me-2 text-muted"></i>
                                                <span x-text="result.title"></span>
                                                <small class="ms-auto text-muted" x-text="result.type"></small>
                                            </div>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <!-- Right Side Icons -->
                        <div class="navbar-nav flex-row">
                            <!-- Theme Toggle with Alpine.js -->
                            <div x-data="themeSwitch">
                                <button class="btn btn-outline-secondary me-2" 
                                        type="button" 
                                        @click="toggle()"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="bottom"
                                        title="Toggle theme">
                                    <i class="bi bi-sun-fill" x-show="currentTheme === 'light'"></i>
                                    <i class="bi bi-moon-fill" x-show="currentTheme === 'dark'"></i>
                                </button>
                            </div>

                            <!-- Fullscreen Toggle -->
                            <button class="btn btn-outline-secondary me-2" 
                                    type="button" 
                                    data-fullscreen-toggle
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="bottom"
                                    title="Toggle fullscreen">
                                <i class="bi bi-arrows-fullscreen icon-hover"></i>
                            </button>

                            <!-- Notifications -->
                            <div class="dropdown me-2">
                                <button class="btn btn-outline-secondary position-relative" 
                                        type="button" 
                                        data-bs-toggle="dropdown" 
                                        aria-expanded="false">
                                    <i class="bi bi-bell"></i>
                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                        3
                                    </span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><h6 class="dropdown-header">Notifications</h6></li>
                                    <li><a class="dropdown-item" href="#">New user registered</a></li>
                                    <li><a class="dropdown-item" href="#">Server status update</a></li>
                                    <li><a class="dropdown-item" href="#">New message received</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-center" href="#">View all notifications</a></li>
                                </ul>
                            </div>

                            <!-- User Menu -->
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary d-flex align-items-center" 
                                        type="button" 
                                        data-bs-toggle="dropdown" 
                                        aria-expanded="false">
                                    <img src="/assets/images/avatar-placeholder.svg" 
                                         alt="User Avatar" 
                                         width="24" 
                                         height="24" 
                                         class="rounded-circle me-2">
                                    <span class="d-none d-md-inline">John Doe</span>
                                    <i class="bi bi-chevron-down ms-1"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>

            <!-- Sidebar -->
            <aside class="admin-sidebar" id="admin-sidebar">
                <div class="sidebar-content">
                    <nav class="sidebar-nav">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link" href="./index.html">
                                    <i class="bi bi-speedometer2"></i>
                                    <span>Dashboard</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./analytics.html">
                                    <i class="bi bi-graph-up"></i>
                                    <span>Analytics</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./users.html">
                                    <i class="bi bi-people"></i>
                                    <span>Users</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./products.html">
                                    <i class="bi bi-box"></i>
                                    <span>Products</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./orders.html">
                                    <i class="bi bi-bag-check"></i>
                                    <span>Orders</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./forms.html">
                                    <i class="bi bi-ui-checks"></i>
                                    <span>Forms</span>
                                    <span class="badge bg-success rounded-pill ms-auto">New</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#elementsSubmenu" aria-expanded="false">
                                    <i class="bi bi-puzzle"></i>
                                    <span>Elements</span>
                                    <span class="badge bg-primary rounded-pill ms-2 me-2">New</span>
                                    <i class="bi bi-chevron-down ms-auto"></i>
                                </a>
                                <div class="collapse" id="elementsSubmenu">
                                    <ul class="nav nav-submenu">
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements.html">
                                                <i class="bi bi-grid"></i>
                                                <span>Overview</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-buttons.html">
                                                <i class="bi bi-square"></i>
                                                <span>Buttons</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-alerts.html">
                                                <i class="bi bi-exclamation-triangle"></i>
                                                <span>Alerts</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-badges.html">
                                                <i class="bi bi-award"></i>
                                                <span>Badges</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-cards.html">
                                                <i class="bi bi-card-text"></i>
                                                <span>Cards</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-modals.html">
                                                <i class="bi bi-window"></i>
                                                <span>Modals</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-forms.html">
                                                <i class="bi bi-ui-checks"></i>
                                                <span>Forms</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-tables.html">
                                                <i class="bi bi-table"></i>
                                                <span>Tables</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./reports.html">
                                    <i class="bi bi-file-earmark-text"></i>
                                    <span>Reports</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./messages.html">
                                    <i class="bi bi-chat-dots"></i>
                                    <span>Messages</span>
                                    <span class="badge bg-danger rounded-pill ms-auto">3</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="./calendar.html">
                                    <i class="bi bi-calendar-event"></i>
                                    <span>Calendar</span>
                                    <span class="badge bg-primary rounded-pill ms-auto">Active</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./files.html">
                                    <i class="bi bi-folder2-open"></i>
                                    <span>Files</span>
                                </a>
                            </li>
                            <li class="nav-item mt-3">
                                <small class="text-muted px-3 text-uppercase fw-bold">Admin</small>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./settings.html">
                                    <i class="bi bi-gear"></i>
                                    <span>Settings</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./security.html">
                                    <i class="bi bi-shield-check"></i>
                                    <span>Security</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./help.html">
                                    <i class="bi bi-question-circle"></i>
                                    <span>Help & Support</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </aside>

            <!-- Floating Hamburger Menu -->
            <button class="hamburger-menu" 
                    type="button" 
                    data-sidebar-toggle
                    aria-label="Toggle sidebar">
                <i class="bi bi-list"></i>
            </button>

            <!-- Main Content -->
            <main class="admin-main">
                <div class="container-fluid p-4 p-lg-4">
                    
                    <!-- Calendar Container with Header -->
                    <div x-data="calendarComponent" x-init="init()">
                        <!-- Page Header -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h1 class="h3 mb-0">Calendar</h1>
                                <p class="text-muted mb-0">Schedule and manage your events</p>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary d-lg-none" @click="toggleSidebar()">
                                    <i class="bi bi-calendar3 me-2"></i>Mini Calendar
                                </button>
                                <button type="button" class="btn btn-outline-secondary" @click="exportCalendar()">
                                    <i class="bi bi-download me-2"></i>Export
                                </button>
                                <button type="button" class="btn btn-primary" @click="addEvent()">
                                    <i class="bi bi-plus-lg me-2"></i>Add Event
                                </button>
                            </div>
                        </div>

                        <!-- Calendar Container -->
                        <div class="calendar-container">
                        <div class="calendar-layout">
                            
                            <!-- Calendar Sidebar -->
                            <div class="calendar-sidebar" :class="{ 'mobile-show': sidebarVisible }">
                                <!-- Sidebar Header -->
                                <div class="calendar-sidebar-header">
                                    <h5 class="sidebar-title mb-0">Calendar</h5>
                                    <button class="btn btn-primary btn-sm" @click="addEvent()" title="Add Event">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                </div>
                                
                                <!-- Mini Calendar -->
                                <div class="mini-calendar">
                                    <div class="mini-calendar-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <button class="btn btn-sm btn-outline-secondary" @click="previousMonth()">
                                                <i class="bi bi-chevron-left"></i>
                                            </button>
                                            <h6 class="mb-0 fw-semibold" x-text="currentMonthYear"></h6>
                                            <button class="btn btn-sm btn-outline-secondary" @click="nextMonth()">
                                                <i class="bi bi-chevron-right"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- Mini Calendar Days Header -->
                                    <div class="mini-calendar-weekdays">
                                        <div class="weekday">S</div>
                                        <div class="weekday">M</div>
                                        <div class="weekday">T</div>
                                        <div class="weekday">W</div>
                                        <div class="weekday">T</div>
                                        <div class="weekday">F</div>
                                        <div class="weekday">S</div>
                                    </div>
                                    
                                    <div class="mini-calendar-grid">
                                        <template x-for="day in miniCalendarDays" :key="day.date">
                                            <div class="mini-calendar-day" 
                                                 :class="{ 
                                                     'today': day.isToday, 
                                                     'other-month': day.isOtherMonth,
                                                     'selected': day.isSelected,
                                                     'has-events': day.hasEvents
                                                 }"
                                                 @click="selectDate(day.date)"
                                                 x-text="day.day"></div>
                                        </template>
                                    </div>
                                </div>

                                <!-- Event Categories -->
                                <div class="event-categories">
                                    <h6 class="category-title">Event Categories</h6>
                                    <div class="category-list">
                                        <label class="category-item">
                                            <input type="checkbox" x-model="visibleTypes" value="event" class="form-check-input">
                                            <span class="category-color" style="background: var(--bs-primary);"></span>
                                            <span class="category-name">Events</span>
                                            <span class="category-count" x-text="getCategoryCount('event')"></span>
                                        </label>
                                        <label class="category-item">
                                            <input type="checkbox" x-model="visibleTypes" value="meeting" class="form-check-input">
                                            <span class="category-color" style="background: var(--bs-success);"></span>
                                            <span class="category-name">Meetings</span>
                                            <span class="category-count" x-text="getCategoryCount('meeting')"></span>
                                        </label>
                                        <label class="category-item">
                                            <input type="checkbox" x-model="visibleTypes" value="task" class="form-check-input">
                                            <span class="category-color" style="background: var(--bs-warning);"></span>
                                            <span class="category-name">Tasks</span>
                                            <span class="category-count" x-text="getCategoryCount('task')"></span>
                                        </label>
                                        <label class="category-item">
                                            <input type="checkbox" x-model="visibleTypes" value="reminder" class="form-check-input">
                                            <span class="category-color" style="background: #8b5cf6;"></span>
                                            <span class="category-name">Reminders</span>
                                            <span class="category-count" x-text="getCategoryCount('reminder')"></span>
                                        </label>
                                        <label class="category-item">
                                            <input type="checkbox" x-model="visibleTypes" value="deadline" class="form-check-input">
                                            <span class="category-color" style="background: var(--bs-danger);"></span>
                                            <span class="category-name">Deadlines</span>
                                            <span class="category-count" x-text="getCategoryCount('deadline')"></span>
                                        </label>
                                    </div>
                                </div>

                                <!-- Upcoming Events -->
                                <div class="upcoming-events">
                                    <h6 class="upcoming-title">Upcoming Events</h6>
                                    <div class="upcoming-list">
                                        <template x-for="event in upcomingEvents.slice(0, 5)" :key="event.id">
                                            <div class="upcoming-item" @click="viewEvent(event)">
                                                <div class="upcoming-time">
                                                    <span class="time" x-text="event.timeStr"></span>
                                                    <span class="date" x-text="event.dateStr"></span>
                                                </div>
                                                <div class="upcoming-content">
                                                    <h6 class="upcoming-event-title" x-text="event.title"></h6>
                                                    <p class="upcoming-description" x-text="event.description"></p>
                                                </div>
                                                <div class="upcoming-indicator" :style="`background: ${getCategoryColor(event.type)}`"></div>
                                            </div>
                                        </template>
                                        
                                        <!-- Empty state -->
                                        <div x-show="upcomingEvents.length === 0" class="upcoming-empty">
                                            <i class="bi bi-calendar-check"></i>
                                            <p>No upcoming events</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Calendar Main Area -->
                            <div class="calendar-main">
                                
                                <!-- Calendar Header -->
                                <div class="calendar-header">
                                    <div class="calendar-nav-left">
                                        <button class="btn btn-link d-lg-none me-2 p-0" @click="sidebarVisible = !sidebarVisible">
                                            <i class="bi bi-list fs-5"></i>
                                        </button>
                                        <div class="calendar-nav-controls">
                                            <button class="btn btn-outline-secondary" @click="previousPeriod()">
                                                <i class="bi bi-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-outline-primary" @click="goToToday()">Today</button>
                                            <button class="btn btn-outline-secondary" @click="nextPeriod()">
                                                <i class="bi bi-chevron-right"></i>
                                            </button>
                                        </div>
                                        <h3 class="calendar-title" x-text="currentPeriodTitle"></h3>
                                    </div>
                                    
                                    <div class="calendar-nav-right">
                                        <div class="view-switcher">
                                            <button class="view-btn" :class="{ 'active': currentView === 'month' }" @click="switchView('month')">
                                                <i class="bi bi-calendar3 me-1"></i>Month
                                            </button>
                                            <button class="view-btn" :class="{ 'active': currentView === 'week' }" @click="switchView('week')">
                                                <i class="bi bi-calendar2-week me-1"></i>Week
                                            </button>
                                            <button class="view-btn" :class="{ 'active': currentView === 'day' }" @click="switchView('day')">
                                                <i class="bi bi-calendar-day me-1"></i>Day
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Calendar Content -->
                                <div class="calendar-content">
                                    
                                    <!-- Month View -->
                                    <div x-show="currentView === 'month'" class="month-view">
                                        <!-- Month Grid Header -->
                                        <div class="month-header">
                                            <div class="month-header-day">Sunday</div>
                                            <div class="month-header-day">Monday</div>
                                            <div class="month-header-day">Tuesday</div>
                                            <div class="month-header-day">Wednesday</div>
                                            <div class="month-header-day">Thursday</div>
                                            <div class="month-header-day">Friday</div>
                                            <div class="month-header-day">Saturday</div>
                                        </div>
                                        
                                        <!-- Month Grid -->
                                        <div class="month-grid">
                                            <template x-for="day in calendarDays" :key="day.date">
                                                <div class="month-day" 
                                                     :class="{ 
                                                         'today': day.isToday, 
                                                         'other-month': day.isOtherMonth,
                                                         'selected': day.isSelected,
                                                         'has-events': day.events && day.events.length > 0
                                                     }"
                                                     @click="selectDay(day)"
                                                     @dblclick="addEventForDay(day)">
                                                    <div class="day-number" x-text="day.day"></div>
                                                    <div class="day-events">
                                                        <template x-for="(event, index) in day.events?.slice(0, 3)" :key="event.id">
                                                            <div class="day-event" 
                                                                 :class="`event-${event.type}`"
                                                                 @click.stop="viewEvent(event)"
                                                                 :title="event.title + ' - ' + event.time">
                                                                <span class="event-title" x-text="event.title"></span>
                                                            </div>
                                                        </template>
                                                        <div x-show="day.events && day.events.length > 3" 
                                                             class="more-events"
                                                             @click.stop="showMoreEvents(day)"
                                                             x-text="`+${day.events.length - 3} more`"></div>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>

                                    <!-- Week View -->
                                    <div x-show="currentView === 'week'" class="week-view">
                                        <!-- Week Header -->
                                        <div class="week-header">
                                            <div class="time-column">Time</div>
                                            <template x-for="day in weekDays" :key="day.date">
                                                <div class="week-day-header" :class="{ 'today': day.isToday }">
                                                    <div class="day-name" x-text="day.dayName"></div>
                                                    <div class="day-number" x-text="day.dayNumber"></div>
                                                </div>
                                            </template>
                                        </div>
                                        
                                        <!-- Week Grid -->
                                        <div class="week-grid">
                                            <div class="time-slots">
                                                <template x-for="hour in hours" :key="hour">
                                                    <div class="time-slot" x-text="hour"></div>
                                                </template>
                                            </div>
                                            <div class="week-days">
                                                <template x-for="day in weekDays" :key="day.date">
                                                    <div class="week-day-column" :class="{ 'today': day.isToday }">
                                                        <template x-for="hour in hours" :key="hour">
                                                            <div class="hour-slot" 
                                                                 @click="addEventAtTime(day.date, hour)"
                                                                 @dblclick="addEventAtTime(day.date, hour)">
                                                                <template x-for="event in getEventsForDateTime(day.date, hour)" :key="event.id">
                                                                    <div class="week-event" 
                                                                         :class="`event-${event.type}`"
                                                                         @click.stop="viewEvent(event)"
                                                                         :title="event.title + ' - ' + event.time">
                                                                        <div class="event-time" x-text="event.time"></div>
                                                                        <div class="event-title" x-text="event.title"></div>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Day View -->
                                    <div x-show="currentView === 'day'" class="day-view">
                                        <div class="day-view-header">
                                            <div class="day-info">
                                                <h4 class="day-title" x-text="selectedDayTitle"></h4>
                                                <p class="day-date" x-text="selectedDayDate"></p>
                                            </div>
                                            <div class="day-stats">
                                                <div class="stat-item">
                                                    <span class="stat-value" x-text="getDayEventCount(selectedDay)"></span>
                                                    <span class="stat-label">Events</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="day-schedule">
                                            <div class="schedule-times">
                                                <template x-for="hour in hours" :key="hour">
                                                    <div class="schedule-time" x-text="hour"></div>
                                                </template>
                                            </div>
                                            <div class="schedule-events">
                                                <template x-for="hour in hours" :key="hour">
                                                    <div class="schedule-hour" 
                                                         @click="addEventAtTime(selectedDay, hour)"
                                                         @dblclick="addEventAtTime(selectedDay, hour)">
                                                        <template x-for="event in getEventsForDateTime(selectedDay, hour)" :key="event.id">
                                                            <div class="schedule-event" 
                                                                 :class="`event-${event.type}`"
                                                                 @click.stop="viewEvent(event)">
                                                                <div class="event-time" x-text="event.time"></div>
                                                                <div class="event-title" x-text="event.title"></div>
                                                                <div class="event-description" x-text="event.description"></div>
                                                            </div>
                                                        </template>
                                                        
                                                        <!-- Current time indicator -->
                                                        <div x-show="isCurrentHour(hour) && isToday(selectedDay)" 
                                                             class="current-time-indicator"></div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>

                </div>
            </main>

            <!-- Add Event Modal -->
            <div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header border-0 pb-0">
                            <div>
                                <h5 class="modal-title fw-bold" id="addEventModalLabel">
                                    <i class="bi bi-calendar-plus me-2 text-primary"></i>Add New Event
                                </h5>
                                <p class="text-muted mb-0 small">Create a new calendar event with all the details</p>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body pt-2" x-data="addEventModal" x-init="init()">
                            <form @submit.prevent="submitEvent()">
                                <!-- Event Title -->
                                <div class="mb-4">
                                    <label for="eventTitle" class="form-label fw-semibold">
                                        <i class="bi bi-pencil me-1"></i>Event Title *
                                    </label>
                                    <input type="text" 
                                           class="form-control form-control-lg" 
                                           id="eventTitle" 
                                           x-model="eventData.title" 
                                           placeholder="Enter event title..."
                                           required>
                                </div>

                                <!-- Event Type & Priority -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label for="eventType" class="form-label fw-semibold">
                                            <i class="bi bi-tag me-1"></i>Event Type
                                        </label>
                                        <select class="form-select" id="eventType" x-model="eventData.type">
                                            <option value="event">📅 Event</option>
                                            <option value="meeting">🤝 Meeting</option>
                                            <option value="task">✅ Task</option>
                                            <option value="reminder">🔔 Reminder</option>
                                            <option value="deadline">⚠️ Deadline</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="eventPriority" class="form-label fw-semibold">
                                            <i class="bi bi-flag me-1"></i>Priority
                                        </label>
                                        <select class="form-select" id="eventPriority" x-model="eventData.priority">
                                            <template x-for="priority in priorityOptions" :key="priority.value">
                                                <option :value="priority.value" x-text="priority.label"></option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Date & Time -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label for="eventDate" class="form-label fw-semibold">
                                            <i class="bi bi-calendar-event me-1"></i>Date *
                                        </label>
                                        <input type="date" class="form-control" id="eventDate" x-model="eventData.date" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="eventTime" class="form-label fw-semibold">
                                            <i class="bi bi-clock me-1"></i>Start Time *
                                        </label>
                                        <input type="time" class="form-control" id="eventTime" x-model="eventData.time" required>
                                    </div>
                                </div>

                                <!-- Duration & Location -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <label for="eventDuration" class="form-label fw-semibold">
                                            <i class="bi bi-hourglass-split me-1"></i>Duration
                                        </label>
                                        <select class="form-select" id="eventDuration" x-model="eventData.duration">
                                            <option value="15">15 minutes</option>
                                            <option value="30">30 minutes</option>
                                            <option value="45">45 minutes</option>
                                            <option value="60">1 hour</option>
                                            <option value="90">1.5 hours</option>
                                            <option value="120">2 hours</option>
                                            <option value="180">3 hours</option>
                                            <option value="240">4 hours</option>
                                            <option value="480">All day</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="eventLocation" class="form-label fw-semibold">
                                            <i class="bi bi-geo-alt me-1"></i>Location
                                        </label>
                                        <input type="text" 
                                               class="form-control" 
                                               id="eventLocation" 
                                               x-model="eventData.location" 
                                               placeholder="Conference room, address, or link...">
                                    </div>
                                </div>
                                
                                <!-- Description -->
                                <div class="mb-4">
                                    <label for="eventDescription" class="form-label fw-semibold">
                                        <i class="bi bi-card-text me-1"></i>Description
                                    </label>
                                    <textarea class="form-control" 
                                              id="eventDescription" 
                                              rows="3" 
                                              x-model="eventData.description" 
                                              placeholder="Add event details, agenda, or notes..."></textarea>
                                </div>

                                <!-- Attendees -->
                                <div class="mb-4">
                                    <label for="eventAttendees" class="form-label fw-semibold">
                                        <i class="bi bi-people me-1"></i>Attendees
                                    </label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="eventAttendees" 
                                           x-model="eventData.attendees" 
                                           placeholder="Enter email addresses separated by commas...">
                                    <div class="form-text">Separate multiple email addresses with commas</div>
                                </div>

                                <!-- Reminders -->
                                <div class="mb-4">
                                    <label class="form-label fw-semibold">
                                        <i class="bi bi-bell me-1"></i>Reminders
                                    </label>
                                    <select class="form-select" x-model="eventData.reminders" multiple>
                                        <template x-for="reminder in reminderOptions" :key="reminder.value">
                                            <option :value="reminder.value" x-text="reminder.label"></option>
                                        </template>
                                    </select>
                                    <div class="form-text">Hold Ctrl/Cmd to select multiple reminders</div>
                                </div>
                                
                                <!-- Recurring Options -->
                                <div class="mb-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="eventRecurring" x-model="eventData.recurring">
                                        <label class="form-check-label fw-semibold" for="eventRecurring">
                                            <i class="bi bi-arrow-repeat me-1"></i>Recurring Event
                                        </label>
                                    </div>
                                </div>
                                
                                <div x-show="eventData.recurring" 
                                     x-transition:enter="transition ease-out duration-200"
                                     x-transition:enter-start="opacity-0 transform scale-95"
                                     x-transition:enter-end="opacity-100 transform scale-100"
                                     class="mb-4">
                                    <label for="eventRecurrence" class="form-label fw-semibold">Repeat Pattern</label>
                                    <select class="form-select" id="eventRecurrence" x-model="eventData.recurrence">
                                        <option value="daily">Daily</option>
                                        <option value="weekly">Weekly</option>
                                        <option value="biweekly">Every 2 weeks</option>
                                        <option value="monthly">Monthly</option>
                                        <option value="yearly">Yearly</option>
                                    </select>
                                </div>

                                <!-- Event Preview -->
                                <div class="alert alert-light border" x-show="eventData.title">
                                    <h6 class="alert-heading">
                                        <i class="bi bi-eye me-1"></i>Event Preview
                                    </h6>
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <span class="badge" 
                                              :style="`background: ${getTypeColor(eventData.type)}; color: white;`"
                                              x-text="eventData.type.charAt(0).toUpperCase() + eventData.type.slice(1)"></span>
                                        <strong x-text="eventData.title || 'Event Title'"></strong>
                                    </div>
                                    <small class="text-muted">
                                        <i class="bi bi-calendar-date me-1"></i>
                                        <span x-text="new Date(eventData.date || new Date()).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })"></span>
                                        at 
                                        <span x-text="eventData.time || '09:00'"></span>
                                        (<span x-text="getDurationLabel(eventData.duration)"></span>)
                                        <span x-show="eventData.location" class="ms-2">
                                            <i class="bi bi-geo-alt me-1"></i>
                                            <span x-text="eventData.location"></span>
                                        </span>
                                    </small>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer border-0 pt-0">
                            <button type="button" class="btn btn-outline-secondary" @click="closeModal()">
                                <i class="bi bi-x-lg me-1"></i>Cancel
                            </button>
                            <button type="button" class="btn btn-primary px-4" @click="submitEvent()">
                                <i class="bi bi-check-lg me-1"></i>Create Event
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Floating Add Event Button -->
            <button class="add-event-btn" @click="addEvent()" title="Add Event">
                <i class="bi bi-plus-lg fs-4"></i>
            </button>

            <!-- Footer -->
            <footer class="admin-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
                        </div>
                    </div>
                </div>
            </footer>

        </div> <!-- /.admin-wrapper -->
    </div>

    <!-- Page-specific Component -->
    <script type="module" src="./scripts/components/calendar.js"></script>

    <!-- Main App Script -->
    <script type="module" src="./scripts/main.js"></script>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const toggleButton = document.querySelector('[data-sidebar-toggle]');
        const wrapper = document.getElementById('admin-wrapper');

        if (toggleButton && wrapper) {
          const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
          if (isCollapsed) {
            wrapper.classList.add('sidebar-collapsed');
            toggleButton.classList.add('is-active');
          }

          toggleButton.addEventListener('click', () => {
            const isCurrentlyCollapsed = wrapper.classList.contains('sidebar-collapsed');
            
            if (isCurrentlyCollapsed) {
              wrapper.classList.remove('sidebar-collapsed');
              toggleButton.classList.remove('is-active');
              localStorage.setItem('sidebar-collapsed', 'false');
            } else {
              wrapper.classList.add('sidebar-collapsed');
              toggleButton.classList.add('is-active');
              localStorage.setItem('sidebar-collapsed', 'true');
            }
          });
        }
      });
    </script>
</body>
</html>